<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Shopping Cart</title>
        <style type="text/css">
            hr{
                margin: 40px 0;
                border: 0;
                border-top: 1px solid #EEE;
                border-bottom: 1px solid white;
                clear: both;
                float: left;
                width: 100%;
            }

        </style>

        <link href="css/reset.css" rel="stylesheet"/>
        <link href="css/shoping-Cart.css" rel="stylesheet"/>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div class="shoppingCart">
            <div>
                <div class="leftside left">
                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> $ 99999.00 </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button loadding"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="item">
                        <img src="http://placehold.it/160x160" class="img-rounded" alt="" width="136" height="135"/>
                        <span class="itemName"> Item Name </span>
                        <span class="itemPrice"> Item Price </span> <span  class="qty"><label>Qty</label><input type="text"/></span>
                        <a class="addtoCart button"><b class="plus"> + </b>Add to cart</a>
                    </div>

                    <div class="pagination">
                        <ul>
                            <li class="previous-off"><a href="#">Prev</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li class="next-off"><a href="#">Next</a></li>
                        </ul>
                    </div>
                </div>

                <div class="rightside right">
                    <table class="table table-striped  checkOutTbl">
                        <thead>
                            <tr class="header">
                                <th width="100">Item Name</th>
                                <th>Qty</th>   
                                <th>Price</th>   
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Item Name</td>
                                <td>10</td>   
                                <td>$ 99999.00</td>    
                            </tr>
                            <tr>
                                <td>Item Name</td>
                                <td>10</td>   
                                <td>$ 99999.00</td>    
                            </tr>
                            <tr>
                                <td>Item Name</td>
                                <td>10</td>   
                                <td>$ 99999.00</td>    
                            </tr>
                            <tr>
                                <td>Item Name</td>
                                <td>10</td>   
                                <td>$ 99999.00</td>    
                            </tr>
                        </tbody>
                    </table>

                    <a class="clear checkOut button">CHECKOUT</a>
                    <a class="clearShopCart button ">Clear My Cart</a>
                </div>
            </div>

            <hr/>

            <div>
                <h3>Credit Card Information</h3>
                <form class="form-horizontal" action>

                    <div class="alert clear">
                        <button type="button" class="close" >×</button>
                        <strong>Warning!</strong> Best check yo self, you're not looking too good.
                    </div>

                    <div class="alert alert-error clear">
                        <button type="button" class="close" >×</button>
                        <strong>Error!</strong> Best check yo self, you're not looking too good.
                    </div>

                    <div class="alert alert-success clear">
                        <button type="button" class="close" >×</button>
                        <strong>Success</strong> Best check yo self, you're not looking too good.
                    </div>


                    <div class="alert alert-info clear">
                        <button type="button" class="close" >×</button>
                        <strong>Information</strong> Best check yo self, you're not looking too good.
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Card number</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block">asasasasasasa sasa sa sa sa</span>
                        <span class="error-Block"> saa s as asas as asasa sasa</span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>CVC</label>
                            <span class="required">*</span>
                        </span>
                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Expiration date</label>
                            <span class="required">*</span>
                        </span>

                        <div class="inner-Group">
                            <select class="small">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>

                            <select class="small">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>
                        </div>
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Address</label>
                            <span class="required">*</span>
                        </span>

                        <textarea rows="4" cols="50"></textarea>
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Zip Code</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <a class="submit button">Pay</a>
                </form>
            </div>
            <hr/>
            <div>
                <h3>Billing Information</h3>
                <form class="form-horizontal" action="">

                    <div class="input-Group">
                        <span class="label">
                            <label>First name</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>last name</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Country</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Address</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>City</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>State</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Zip code</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Email</label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <div class="input-Group">
                        <span class="label">
                            <label>Phone </label>
                            <span class="required">*</span>
                        </span>

                        <input type="text" />
                        <span class="help-Block"></span>
                        <span class="error-Block"></span>
                    </div>

                    <a class="submit button">Next</a>
                </form>

            </div>
            <hr/>

            <div>


                <ul class="nav">
                    <li class="active">
                        <a href="#">Products</a>
                    </li>
                    <li><a href="#">Order details</a></li>
                </ul>



                <h3>Edit Product</h3>
                <div class="editProductBlock">
                    <div class="porductFields">
                        <div class="input-Group">
                            <span class="label">
                                <label>Title</label>
                                <span class="required">*</span>
                            </span>

                            <input type="text" />
                            <span class="help-Block"></span>
                            <span class="error-Block"></span>
                        </div>

                        <div class="input-Group">
                            <span class="label">
                                <label>Description</label>
                                <span class="required">*</span>
                            </span>

                            <textarea rows="4" cols="50"></textarea>
                            <span class="help-Block"></span>
                            <span class="error-Block"></span>
                        </div>

                        <div class="input-Group">
                            <span class="label">
                                <label>Price</label>
                                <span class="required">*</span>
                            </span>

                            <input type="text" />
                            <span class="help-Block"></span>
                            <span class="error-Block"></span>
                        </div>

                        <div class="input-Group">
                            <span class="label">
                                <label>Image</label>
                                <span class="required">*</span>
                            </span>

                            <input type="file" />
                            <span class="help-Block"></span>
                            <span class="error-Block"></span>
                        </div>
                    </div>
                    <div class="porductImage">
                        <div class="placeHolder">
                            <img src="images/product.jpg" alt="" />
                        </div>
                    </div>
                </div>

                <a class="submit button editProductBlocksubmit">Save</a>

                <a class="back button">Back to list</a>

            </div>
            <hr/>
            <div>
                <h3>Products List</h3>
                <table class="table table-bordered table-striped adminGrid">
                    <thead>
                        <tr class="header">
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Country</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Address</th>
                            <th>Zip code</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Date</th>
                            <th>Show Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                    </tbody>
                </table>
                <div class="pagination">
                    <ul>
                        <li><a href="#">Prev</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">Next</a></li>
                    </ul>
                </div>
            </div>

            <hr/>

            <div>
                <h3>Products List</h3>  <a class="addProduct button right">Add Product</a>
                <table class="table table-bordered table-striped adminGrid">
                    <thead>
                        <tr class="header">
                            <th>Title</th>
                            <th>Price</th>
                            <th>Actions</th>          
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>

                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>


                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>
                                <ul class="actions">
                                    <li>
                                        <a class="edit"></a>
                                    </li>
                                    <li>
                                        <a class="delete"></a>
                                    </li>
                                </ul>
                            </td>
                        </tr>

                    </tbody>
                </table>
                <div class="pagination">
                    <ul>
                        <li><a href="#">Prev</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li class="active"><a href="#">4</a></li>
                        <li><a href="#">Next</a></li>
                    </ul>
                </div>


            </div>



            <hr/>
            <div>
                <h3>Order Details</h3>
                <table class="table table-bordered table-striped adminGrid">
                    <thead>
                        <tr class="header">
                            <th>Product</th>
                            <th>Quantity</th>
                            <th>Price</th>            
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                        <tr>
                            <td><a href="">Product</a></td>
                            <td>1</td>
                            <td>20.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <hr/>
            <div class="productProfile">

                <div class="placeHolder left">
                    <img src="images/product.jpg" alt=""/>
                </div>
                <div class="productData">
                    <h2>Ink Pad tk-222lr</h2>
                    <h2 class="price">$ 2000.0000</h2>
                    <h3>Desctiption</h3>
                    <p>
                        Eu nec quis arcu ac, auctor dis auctor dignissim pid dictumst, pulvinar tempor enim pulvinar a aliquam? Diam magna vut arcu etiam pulvinar, enim, sit lundium in dis massa, auctor, cum amet ut a, dolor, sed enim in natoque, tempor montes, integer ut odio et a et, turpis ridiculus aenean, velit velit aliquam ultrices aliquam, etiam ultrices enim lacus nec a cras dignissim diam pid! Non tincidunt porta nunc? Et penatibus sed nunc montes diam! Nisi risus? Nisi sociis, purus nisi ut platea, ut arcu vel montes! Mattis magna vel, nascetur! Proin sagittis duis purus, elementum mattis nisi parturient? Egestas lundium? Magnis montes, ut, amet penatibus, velit, hac pulvinar turpis non ultricies lundium, amet nunc etiam magnis montes penatibus.
                    </p>
                    
                </div>

            </div>
              <hr/>

            <div class="moreDetails">
                <span class="label clear left">Address</span>
                <span class="left value">
                    17011 Beach Blvd., Suite 900 
                    <br/>
                    Huntington Beach, CA 92647
                    <br/>
                    USA
                </span>
                
                <span class="label clear left">Zip Code</span>
                <span class="left value">12365</span>
                
                <span class="label clear left">E-mail</span>
                <span class="left value">email@domain.com</span>
                
                <span class="label clear left">Phone</span>
                <span class="left value">123456789</span>
                
            </div>


        </div>
        <script type="text/javascript">
            $('button.close').click(function() {
                $(this).parent().slideUp();
            });
        </script>
    </body>
</html>
